<template>
  <div class="feedbackVerificationDetail">
    <zyInfoPanel title="可疑件信息" :showUnfoldButton="false" class="orderInfoItem">
      <zyInfoPanelDetail :info="sortingInfo" cellNum="4"></zyInfoPanelDetail>
    </zyInfoPanel>
    <zyInfoPanel title="附件信息" :showUnfoldButton="false" class="orderInfoItem" v-if="detail.get_pictures_urls">
      <div class="imgArea">
        <zy-image v-model="detail.get_pictures_urls" class="img" readonly></zy-image>
      </div>
    </zyInfoPanel>
    <zyInfoPanel title="反馈信息" :showUnfoldButton="false" v-if="type == 'feedback' || detail.debious_feedbackid"
                 class="orderInfoItem">
      <div class="feedbackContent" v-if="detail.debious_feedbackid">
        <zyInfoPanelDetail :info="feedbackInfo" cellNum="3"></zyInfoPanelDetail>
        <div class="imgArea">
          <div class="imgTitle">反馈照片：</div>
          <div class="imgContent">
            <zy-image v-model="detail.debious_feedback.pic" class="img"
                      v-if="detail.debious_feedback && detail.debious_feedback.pic" readonly></zy-image>
            <span v-else>无</span>
          </div>
        </div>
      </div>
      <div class="feedbackContent" v-else>
        <div class="feedbackInfo">
          <div class="feedbackItem">
            <div class="itemTitle required">反馈人：</div>
            <div class="itemContent">
              <zy-input v-model="feedback.name" maxlength="20" :clearable="true"></zy-input>
            </div>
          </div>
          <div class="feedbackItem">
            <div class="itemTitle required">反馈人电话：</div>
            <div class="itemContent">
              <zy-input type="mobile" v-model="feedback.mobile" maxlength="11" :clearable="true"></zy-input>
            </div>
          </div>
          <div class="feedbackItem">
            <div class="itemTitle required">案件描述：</div>
            <div class="itemContent">
              <zy-input v-model="feedback.info" maxlength="50" :clearable="true"></zy-input>
            </div>
          </div>
        </div>
        <div class="feedbackInfo">
          <div class="feedbackItem">
            <div class="itemTitle required">反馈照片：</div>
            <div class="itemContent">
              <el-upload
                  class="upload-demo"
                  drag
                  action=""
                  :httpRequest="uploadFile"
                  accept=".jpg,.jpeg,.png,.bmp,.wbmp,.JPG,.JPEG,.PNG,.BMP,.WBMP"
                  :show-file-list="false"
              >
                <zy-image v-model="feedback.pic" v-if="feedback.pic" @removeImage="removeImage(index)"></zy-image>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  请上传
                </div>
              </el-upload>
            </div>
          </div>
        </div>
      </div>
    </zyInfoPanel>
    <div class="btnArea">
      <zy-button @click="submitDubiousFeedback" type="primary" class="btn" v-if="type == 'feedback'">反馈</zy-button>
      <zy-button @click="back" class="btn">返回</zy-button>
    </div>
  </div>
</template>

<script>
	export default {
		name: "SFeedbackVerificationDetail",
		props: {},
		data() {
			return {
				sortingInfo: [
					{
						name: "寄件人姓名：",
						val: "",
						code: 'post_communicate_name'
					},
					{
						name: "寄件人联系方式：",
						val: "",
						code: 'post_communicate_mobile'
					},
					{
						name: "寄件人地址：",
						val: "",
						code: 'post_communicate_address'
					},
					{
						name: "收件人姓名：",
						val: "",
						code: 'receive_communicate_name'
					},
					{
						name: "收件人联系方式：",
						val: "",
						code: 'receive_communicate_mobile'
					},
					{
						name: "收件人地址：",
						val: "",
						code: 'receive_communicate_address'
					},
					{
						name: "物品类型：",
						val: "",
						code: 'goods_type'
					},
					{
						name: "重量：",
						val: "",
						code: 'weight'
					},
					{
						name: "快递单号：",
						val: "",
						code: 'logistics_no'
					},
					{
						name: "数量：",
						val: "",
						code: 'num'
					},
					{
						name: "揽件时间：",
						val: "",
						code: 'company_name'
					},
					{
						name: "揽件人：",
						val: "",
						code: 'employee_name'
					},
				],
				logistics_id: '',
				type: '',
				detail: {},
				feedbackInfo: [
					{
						name: "反馈人：",
						val: "",
						code: 'sname'
					},
					{
						name: "反馈人电话：",
						val: "",
						code: 'mobile'
					},
					{
						name: "案件描述：",
						val: "",
						code: 'info'
					},
				],
				feedback: {
					pic: '',
					name: '',
					mobile: '',
					info: '',
					modify_user_id: '',
        }
			};
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			getData() {
				this.$axios.post(this.$api.detailLogistics, {
					logistics_id: this.logistics_id
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.sortingInfo = this.sortingInfo.filter(item => {
							item.val = data[item.code];
							return item
						});

						this.detail = {...data};

						if (data.debious_feedbackid) {
							this.feedbackInfo = this.feedbackInfo.filter(item => {
								item.val = data.debious_feedback[item.code];
								return item
							});
							this.detail.get_pictures_urls = data.employee_pictures.length ? data.employee_pictures[0] : '';
						}
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			removeImage(){
				this.feedback.pic = '';
			},
			uploadFile(params){
				this.$axios.post(this.$api.uploadFile, {
					isFile: true,
					file: params.file,
					operator: 'goods',
				}).then(res=>{
					if(res.code==200){
						this.$message.success(res.msg);
						this.feedback.pic = res.data.url;
					}else{
						this.$message.error(res.msg);
					}
				})
			},
			submitDubiousFeedback() {
				this.$axios.post(this.$api.submitDubiousFeedback, {
					...this.feedback,
					logistics_id: this.logistics_id
				}).then(res=>{
					if(res.code==200){
						this.$message.success(res.msg);
						this.back();
					}else{
						this.$message.error(res.msg);
					}
				})
			},
			back() {
				this.$blackRoute({path: '/sorting/feedback_verification', that: this})
			}
		},
		mounted() {
			this.type = this.$route.query.type;
			this.logistics_id = this.$route.query.logistics_id;
			this.getData()
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/sorting/feedbackVerification/feedbackVerificationDetail/index.less">

</style>
